import React, { useState } from 'react';
import styles from './index.module.scss';
import SearchIcon from '@/assets/icons/search.svg?react';
import DeleteIcon from '@/assets/icons/input-delete.svg?react';
import { CSSTransition } from 'react-transition-group';
import classNames from 'classnames';
import Button from '../Button';

const Search: React.FC = (props) => {

  const [isFocused, setIsFocused] = useState(false); // 跟踪聚焦状态

  function handleFocus() {
    setIsFocused(true);
  }

  function handleBlur() {
    setIsFocused(false);
  }

  return (
    <div className={classNames(styles.container, {[styles.focused]: isFocused})}>
      <div className={styles['input-wrapper']}>
        <div className={styles.icon}><SearchIcon/></div>
        <input 
          className={styles.input} 
          placeholder='搜索' 
          onFocus={handleFocus} 
          onBlur={handleBlur}
        />
        <DeleteIcon className={styles.icon}/>
        <div className={styles.line}/>
        <Button className={styles['search-icon']} icon={<SearchIcon/>} size='lg'></Button>
      </div>
      <CSSTransition
        in={isFocused}
        timeout={300}
        classNames={{
          enter: styles['fade-enter'], // 进入动画的类名
          enterActive: styles['fade-enter-active'], // 进入动画激活的类名
          exit: styles['fade-exit'], // 退出动画的类名
          exitActive: styles['fade-exit-active'], // 退出动画激活的类名
        }}
        unmountOnExit
      >
        <div className={styles['select-box']}></div>
      </CSSTransition>
    </div>
  );
};

export default Search;